<!-- diy模板市场 -->
<template>
  <div id="diy_template_manage">
    <div class="diy_head">
      <div class="template_head">
        <div class="template_name">模板管理</div>
      </div>
      <div class="select_type">
        <div class="select_type_child">
          <div class="select_type_child_box">
            <div>
              <a-radio-group v-model="type">
                <a-radio-button value="0">全部</a-radio-button>
                <a-radio-button value="1">会员中心</a-radio-button>
                <a-radio-button value="2">推广中心</a-radio-button>
                <a-radio-button value="3">分类中心</a-radio-button>
                <a-radio-button value="4">商品模板</a-radio-button>
                <a-radio-button value="5">商品列表</a-radio-button>
                <a-radio-button value="6">PC端商品模板</a-radio-button>
              </a-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="diy_template_market_main">
      <div class="template_list" v-show="type === (temind+1).toString() || type === '0'" v-for="(tem, temind) in templateList">
        <div class="template_list_child" :data-code="item.code" v-for="(item, index) in tem.list">
          <img :src="require(`../../resource/images/${item.image}.png`)" alt="">
          <div :class="[tem.active === item.code?'active':'hoverBox']">
            <div v-show="tem.key == 'member' &&item.code =='member01' && tem.active === item.code" class="selectBtn" style="right: 65px;" @click.stop="setMemberInfo">设置</div>
            <div v-show="tem.key == 'category' &&item.code =='category04' && tem.active === item.code" class="selectBtn" style="right: 65px;" @click.stop="setCategoryInfo">设置</div>
            <div v-show="tem.active === item.code" class="selectBtn">使用中</div>
            <div v-show="tem.active !== item.code" class="selectBtn"
                 @click="chooseIt(item.code,item.image, item.type)">使用
            </div>
            <p class="template_title">
              {{tem.text}}{{index+1}}
              <span v-if="item.tips">({{item.tips}})</span>
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
	export default {
		data() {
			return {
				type: '0',

				templateList: [
					{
						key: 'member',
            active: '',
            text: '会员中心模板',
						list: [
							{code: 'member01', image: 'member_01', type: 1},
							{code: 'member02', image: 'member_02', type: 1}
						]
					},
					{
						key: 'extension',
						active: '',
						text: '推广中心模板',
						list: [
							{code: 'extension01', image: 'extension_01', type: 2},
							{code: 'extension02', image: 'extension_02', type: 2}
						]
					},
					{
						key: 'category',
						active: '',
						text: '分类中心模板',
						list: [
							{code: 'category01', image: 'category_01', type: 3},
							{code: 'category02', image: 'category_02', type: 3},
							{code: 'category03', image: 'category_03', type: 3, tips: '不支持小程序'},
							{code: 'category04',image: 'category_04', type: 3},
							{code: 'category05',image: 'category_05', type: 3, tips: '只支持小程序'}
						]
					},
					{
						key: 'goods',
						active: '',
						text: '商品详情模板',
						list: [
							{code: 'goods01', image: 'goods_01', type: 4},
							{code: 'goods02', image: 'goods_02', type: 4},
              {code: 'goods03', image: 'goods_03', type: 4}
						]
					},
					{
						key: 'goodsList',
						active: '',
						text: '商品列表模板',
						list: [
							{code: 'goodsList01', image: 'goods_list_01', type: 5},
							{code: 'goodsList02', image: 'goods_list_02', type: 5},
							{code: 'goodsList03', image: 'goods_list_01', type: 5, tips: '显示爱心值兑价'}
						]
					},
					{
						key: 'PCGoods',
						active: '',
						text: 'PC端商品列表模板',
						list: [
							{code: 'PCGoods01', image: 'goods_01', type: 6},
							{code: 'PCGoods02', image: 'goods_02', type: 6}
						]
					},
				],
			};
		},

		components: {},

		created() {
			this.getList();
		},

		computed: {},

		methods: {
			getList() {
				$http
						.post(
								"plugin.decorate.admin.decorate-templet.get-list",
								{type: this.type},
								"loading"
						)
						.then(response => {
							if (response.result === 1) {
								for (let key  in response.data) {
									for(let i=0; i<this.templateList.length; i++) {
										if(key === this.templateList[i].key) {
											this.templateList[i].active = response.data[key].code ? response.data[key].code : ''
										}
                  }
									// this[key + 'Active'] = response.data[key].code ? response.data[key].code : '';
									// console.log(key,this[key + 'Active'] + ' ' + response.data[key].code)
								}
							} else {
								console.error(response.msg);
							}
						})
						.catch(err => {
							console.error(err);
						});
			},
			chooseIt(code, image, type) {
				$http
						.post(
								"plugin.decorate.admin.decorate-templet.save",
								{name: code, code: code, image: image, type: type},
								"loading"
						)
						.then(response => {
							if (response.result === 1) {
								this.$message.success('设置成功');
								this.getList();
							} else {
								// this.$message.error(response.msg);
							}
						})
						.catch(err => {
							console.error(err);
						});
			},
      setMemberInfo(){
        let url = window.location.href.substring(0,window.location.href.indexOf('route='));
				// /admin/shop?c=site&a=entry&m=yun_shop&do=7900& 独立版
				// /web/index.php?c=site&a=entry&m=yun_shop&do=1333& 微擎版
				window.location.href = url + 'route=plugin.decorate.admin.decorate-default-template.index&i='+this.fun.getKeyByI();
      },
      setCategoryInfo(){
        let url = window.location.href.substring(0,window.location.href.indexOf('route='));
				window.location.href = url + 'route=plugin.decorate.admin.decorate-category-four-template.index&i='+this.fun.getKeyByI();
      },
		}
	}

</script>
<style lang="less" scoped>
  #diy_template_manage {
    padding: 30px 20px 20px 20px;
    p {
      margin: 0;
    }
    .diy_head {
      width: 100%;
      overflow: hidden;
      flex-shrink: 0;
      .template_head {
        height: 38px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .template_name {
          border-left: 4px solid #29ba9c;
          text-indent: 10px;
        }
      }
      .select_type {
        display: flex;
        flex-direction: column;
        padding-top: 8px;
        .select_type_child {
          display: flex;
          padding: 0 24px 24px;
          .select_type_child_box {
            flex: 1;
            .ant-radio-button-wrapper {
              border: none;
              color: #999999;
              height: 24px;
              line-height: 24px;
              background: #ffffff;
              border-radius: 12px;
              margin-right: 10px;
            }
            .ant-radio-button-wrapper-checked {
              box-shadow: none;
            }
            .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
              outline: none;
              box-shadow: none;
            }
            .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
              color: #fff;
              background: #29ba9c;

            }
            .ant-radio-button-wrapper::before {
              width: 0;
            }
          }
        }
      }
    }
    .diy_template_market_main {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      padding: 20px 40px;
      .template_list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 20px;
        .template_list_child {
          height: 420px;
          width: 220px;
          margin: 0 20px 25px 0;
          overflow: hidden;
          border-radius: 15px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .hoverBox {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
          }
          .selectBtn {
            position: absolute;
            width: 50px;
            height: 20px;
            line-height: 16px;
            color: #fff;
            border: 1px solid #fff;
            font-size: 12px;
            text-align: center;
            top: 6px;
            right: 6px;
            border-radius: 4px;
            cursor: pointer;
          }
          .template_title {
            position: absolute;
            height: 30px;
            line-height: 30px;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: left;
            padding: 0 8px;
            color: #fff;
            overflow: hidden; /*超出部分隐藏*/
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            white-space: nowrap; /*规定段落中的文本不进行换行 */

          }
          .active {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            .selectBtn {
              background: #ffffff;
              color: #29ba9c;
            }
          }
        }
        .template_list_child:hover {
          .hoverBox {
            display: block;
          }
        }
      }
    }
    .bottom_pagination {
      flex-shrink: 0;
      height: 32px;
      margin-bottom: 24px;
      text-align: center;
    }
  }
</style>
